import { FC } from 'react'
import { EChartsOption } from 'echarts'

const xData = ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份', '7月份', '8月份', '9月份', '10月份', '11月份', '12月份']

const option:EChartsOption = {
  title: {
    text: '组合图',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    borderWidth: 0,
    top: 110,
    bottom: 95,
  },
  legend: {
    top: '8%',
    textStyle: {
      color: '#90979c',
    },
    data: ['女', '男', '平均'],
  },

  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#90979c',
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLabel: {
        interval: 0,
      },
      data: xData,
    },
  ],
  yAxis: {
    splitLine: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: '#90979c',
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
    },
    splitArea: {
      show: false,
    },
  },
  series: [
    {
      name: '女',
      type: 'bar',
      stack: '总量',
      barMaxWidth: 35,
      barGap: '10%',
      itemStyle: {
        color: 'rgba(255,144,128,1)',
      },
      data: [
        709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078,
      ],
    },

    {
      name: '男',
      type: 'bar',
      stack: '总量',
      itemStyle: {},
      data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
    },
    {
      name: '总数',
      type: 'line',
      symbolSize: 10,
      symbol: 'circle',
      itemStyle: {},
      data: [
        1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298,
      ],
    },
  ],
}

const Line: FC = () => {
  const [echartsRef] = useEcharts(option)
  return <div ref={echartsRef} className="content-box" />
}

export default Line
